import React, { useEffect, useState } from "react";
import styles from "./Index.module.css";
import Mynav from "../../components/Mynav/Index";
import instance from "../../api/request";
import { Tabs } from "antd-mobile";
import Mywenlist from '../../pages/wen/components/Mywenlist/Index'
function Index() {
  const [tab, setTab] = useState([]);
  const [deptId, setDeptId] = useState<number | null>(null);

  useEffect(() => {
    instance.get("/api/share/knowledgeBase/v1/findDepartment").then((res) => {
      console.log(res);
      const list = res.data.result || []
      setTab(list)
      if (list.length) {
        setDeptId(list[0].id)
      }
    });
  }, []);

  
  return (
    <div className={styles.wenzong}>
      <Mynav />

      <div className={styles.tab}>
        <Tabs  onChange={(key)=> setDeptId(Number(key))}>
          {tab.map((item) => (
            <Tabs.Tab key={(item.id)} title={item.departmentName} />
          ))}
        </Tabs>
      </div>
      
      
      


          <div className={styles.xtab}>
          {deptId !== null && <Mywenlist deptId={deptId} />}
          </div>    
          
    </div>
  );
}

export default Index;
